<template>
  <div>
    <div class="list_con">
      <!-- <div class="filter_area">
        <el-input v-model="input" class="serach_input mr_15 mt_15" size="medium" placeholder="模板名称"></el-input>
        <el-button size="medium" @click="search">搜索</el-button>
      </div>-->
 <!--     <div
        class="head_tags"
        style="margin: 20px 0px"
        v-if="pagetype == '4' || pagetype == '1'&&$edition_type!='single'"
      >
        <div class="head_tags_title">模板分类：</div>
        <div
          :class="tagDisplay == -1 ? 'head_tags_item_click' : 'head_tags_item'"
          @click="selectTag(-1)"
        >
          全部
        </div>
        <div class="head_tags">
          <div
            v-for="(item, i) in tamplateClassList"
            :key="i"
            :class="tagDisplay == i ? 'head_tags_item_click' : 'head_tags_item'"
            @click="selectTag(i, item)"
          >
            {{ item.classify }}
          </div>
        </div>
      </div> -->
      <el-tabs
        v-model="modeltype"
        @tab-click="tabClick"
      >
<!--        <el-tab-pane name="0" label="模板市场" v-if="$edition_type!='single'">
          <div class="list">
            <el-card
              class="item_div"
              :body-style="'padding:0'"
              v-for="(item, i) in templateList"
              :key="i"
              shadow="hover"
            >
              <div class="item">
                <div class="temp-detail">
                  <span>{{ item.page_name }}</span>
                </div>
                <div class="temp-action">
                  <div class="temp-action-btn primary">
                    <el-button type="primary" @click="addPage(item, 1)"
                      >使用模板</el-button
                    >
                  </div>
                </div>
                <vimage :src="item.small_img" ></vimage>
              </div>
            </el-card>
          </div>
          <div class="table_footer" style="justify-content: flex-end">
            <el-pagination
              @current-change="changePage"
              class="pages"
              background
              hide-on-single-page
              layout="prev, pager, next"
              :total="total"
              :page-count="page"
              :page-size="size"
            ></el-pagination>
          </div>
        </el-tab-pane> -->
        <el-tab-pane name="1" label="我的模板">
          <div class="list">
            <el-card
              class="item_div"
              :body-style="'padding:0'"
              shadow="hover"
              v-if="pagetype > 0"
            >
              <div class="item">
                <div class="temp-detail">
                  <span>空白页面</span>
                </div>
                <div class="temp-action">
                  <div class="temp-action-btn primary">
                    <el-button type="primary" @click="addPage(pagetype)"
                      >使用模板</el-button
                    >
                  </div>
                </div>
                <img src="@/assets/images/ipbg.png" />
              </div>
            </el-card>
            <el-card
              class="item_div"
              :body-style="'padding:0'"
              v-for="(item, i) in templateList"
              :key="i"
              shadow="hover"
            >
              <div class="item">
                <div class="temp-detail">
                  <span>{{ item.page_name }}</span>
                </div>
                <div class="temp-action">
                  <div class="temp-action-btn primary">
                    <el-button type="primary" @click="addPage(item, 2)"
                      >使用模板</el-button
                    >
                  </div>
                </div>
                <vimage :src="item.small_img"></vimage>
              </div>
            </el-card>
          </div>
          <div class="table_footer" style="justify-content: flex-end">
            <el-pagination
              @current-change="changePage"
              class="pages"
              background
              layout="prev, pager, next"
              hide-on-single-page
              :total="total"
              :page-count="page"
              :page-size="size"
            ></el-pagination>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
import { marketList, myTemplateList, classList } from "@/api/mall/dndlist";
export default {
  props: {
    pagetype: {
      type: String,
      default: "0",
    },
  },
  data() {
    return {
      templateList: [],
      page: 1,
      size: 12,
      total: 0,
      tagDisplay: -1,
      input: "",
      modeltype: "1",
      class_name: "",
      tamplateClassList: [],
    };
  },
  watch: {
    pagetype() {
      this.getTemplatelist();
      this.selectTag(-1);
      this.modeltype = "1"
    },
  },
  mounted() {
    if(this.$edition_type=='single'){
      this.modeltype = "1"
       this.getTemplatelist();
    }else{

      this.getClassList();
    }

  },
  methods: {
    getTemplatelist() {
      this.templateList = [];
      let data = {
        page: this.page,
        size: this.size,
        class_name: this.class_name,
        page_type: this.pagetype=="4"?0: this.pagetype,
      };
      if (this.modeltype == "0") {
       
        marketList(data).then((res) => {
          let o = res.msg;
          this.templateList = o.data;
          this.total = o.total;
          console.log(res);
        });
      } else {
      
        myTemplateList(data).then((res) => {
          let o = res.msg;
          this.templateList = o.data;
          this.total = o.total;
        });
      }
    },
    addPage(item, type) {
      if (typeof item == "object") {
        this.$router.push({
          path: "/dndlist",
          query: {
            page_type: this.pagetype=='4'?this.pagetype:item.page_type,
            type: this.pagetype=='4'?this.pagetype:item.page_type,
            id: item.id,
            temp: type,
          },
        });
      } else {
        this.$router.push({
          path: "/dndlist",
          query: {
            type: item,
          },
        });
      }
      this.drawer = false;
    },

    changePage(page) {
      this.page = page;
      this.getTemplatelist();
    },
    // 获取 模板类型列表
    getClassList(classify) {
      if (!classify) {
        classify = "";
      }
      let data = {
        page: 1,
        size: 10,
        classify,
      };
      classList(data).then((res) => {
        this.tamplateClassList = res.msg.data;
      });
    },
    // 搜索
    search() {
      this.tagDisplay = -1;
      this.getTemplatelist(this.input);
    },
    // 选择标签
    selectTag(i, item) {
      this.page = 1;
      this.tagDisplay = i;
      if (i == -1) {
        this.class_name = "";
        this.getTemplatelist();
      } else {
        this.class_name = item.classify;
        this.getTemplatelist();
      }
    },
    tabClick() {
      this.page = 1;
      this.getTemplatelist();
    },
  },
};
</script>

<style lang="scss" scoped>
.mall_template {
  .el-card {
    border: none !important;
  }
}
.list_con {
  margin-top: 0px;
}
/deep/ .el-dialog__body {
  padding-top: 0;
}
</style>
<style lang="scss" scoped>
.list {
  display: flex;
  flex-wrap: wrap;
  // padding: 20px;
  .item_div {
    margin: 18.2px;
    border: none;
  }
  .item {
    display: flex;
    width: 225px;
    cursor: pointer;
    flex-direction: column;
    position: relative;
    padding: 0;
    &:hover {
      .temp-action {
        display: flex;
      }
      .temp-detail {
        display: block;
      }
    }
    .temp-detail {
      font-weight: bold;
      padding: 20px;
      display: none;
      position: absolute;
      top: 0;
      z-index: 5;
      color: #ffffff;
      text-align: center;
      width: 100%;
    }
    .temp-action {
      position: absolute;
      top: 0;
      background: rgba(0, 0, 0, 0.7);
      display: none;
      // flex-direction: column;
      align-items: center;
      justify-content: center;
      z-index: 2;
      width: 223px;
      height: 400px;
      border-radius: 4px 4px 0 0;
      .temp-action-btn {
        border-radius: 2px;
        height: 32px;
        width: 100%;
        font-size: 14px;
        // font-weight: bold;
        line-height: 32px;
        text-align: center;
        color: #fff;
        cursor: pointer;
        i {
          font-size: 32px;
        }
      }
    }
    img {
      width: 225px;
      height: 400px;
    }
  }
}
.show_page {
  display: flex;
  .show_item {
    display: flex;
    margin-right: 20px;
    margin-bottom: 20px;
    border-radius: 2px;
    box-shadow: 0px 1px 4px rgba(133, 148, 162, 0.2);
    flex-wrap: nowrap;
    padding: 10px 0 10px 10px;
    img {
      width: 112px;
    }
    .show_content {
      padding: 0 20px;
      display: flex;
      flex-direction: column;
    }
  }
}
.head_tags {
  display: flex;
  align-items: flex-start;
  .head_tags_title {
    line-height: 30px;
    font-size: 15px;
    color: #333333;
  }
  .head_tags_item {
    margin-right: 13px;
    cursor: pointer;
    padding: 8px 18px;
    color: #999999;
    background: #f4f4f4;
    border: none;
    transition: all 0.3s;
    font-size: 13px;
    border-radius: 3px;
  }
  .head_tags_item:hover {
    color: #fff;
    background: #3456dc;
  }
  .head_tags_item_click {
    margin-right: 13px;
    cursor: pointer;
    padding: 8px 18px;
    border: none;
    transition: all 0.3s;
    font-size: 13px;
    border-radius: 3px;
    color: #fff;
    background: #3456dc;
  }
}
</style>
